﻿<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@page isELIgnored="false"%>
<c:set var="rootpath" value="${pageContext.request.contextPath}"></c:set>
<html>

<head>
<meta name=”renderer” content=”webkit”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1” />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 标题修改 -->
<meta name="title" content="吐槽">
<meta name="description" content="吐槽">
<meta name="keywords" content="吐槽">
<title>吐槽</title>
<!-- 网站logo -->
<link rel="shortcut icon" href="${rootpath }/img/logo/g1181_16X16.ico"
	type="image/x-icon">
<link rel="icon" href="${rootpath }/img/logo/g1181_16X16.ico"
	type="image/x-icon">

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="${rootpath }/css/bootstrap.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="${rootpath }/css/bootstrap.min.css">

<link href="${rootpath }/css/login/signin.css" rel="stylesheet">

<link rel="stylesheet" type="text/css"
	href="${rootpath }/css/bootstrapValidator.min.css" />

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${rootpath }/js/jquery-3.0.0.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${rootpath }/js/bootstrap.min.js"></script>

<script src="${rootpath }/js/bootstrapValidator.min.js"
	type="text/javascript" charset="utf-8"></script>

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="${rootpath }/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="${rootpath }/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="${rootpath }/js/html5shiv.js"></script>
      <script src="${rootpath }/js/respond.min.js"></script>
    <![endif]-->
<script src="${rootpath }/js/ie10-viewport-bug-workaround.js"></script>

</head>

<style>
.m-whitecolor {
	background-color: white;
}
</style>

<body class="m-whitecolor">

	<div class="container">

		<form action="add_suggest" method="post" id="addform">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-4">
					<textarea rows="4" class="form-control"
						placeholder="吐槽星人，有什么绝招使出来吧" name="review" id="review"></textarea>

				</div>
				<div class="col-md-3">
					<div class="input-group">
						<span class="input-group-addon m-whitecolor">名称</span> <input
							type="text" class="form-control" placeholder="游客" name="name">
					</div>
					<div class="input-group">
						<span class="input-group-addon m-whitecolor">邮箱</span> <input
							type="text" class="form-control" placeholder="选填" name="email">
					</div>
					<div class="input-group">
						<span class="input-group-addon m-whitecolor">网址</span> <input
							type="text" class="form-control" placeholder="选填" name="website">
					</div>
				</div>
				<div class="col-md-3"></div>
			</div>

			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-4">
					<p style="font-size: 20px; color: #999999;">已经有无数人吐槽过,并得到回复</p>
				</div>
				<div class="col-md-3">
					<input type="submit" class="btn btn-warning btn-xs" value="确定吐槽"
						align="right" /> <input type="button"
						class="btn btn-error btn-xs" style="display: none"
						onclick="cancelreply(this)" value="取消回复" id="show" />
				</div>
				<div class="col-md-3"></div>
			</div>
		</form>

		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-7">
				<hr />
			</div>
			<div class="col-md-3"></div>
		</div>

		<c:forEach var="suggest" items="${suggests}">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-7">


					<div class="panel panel-default">
						<div class="panel-body" style="margin-bottom: 0;">
							<div class="group">
								<div class="row">
									<div class="col-sm-9">
										<span class=""><a href="${suggest.website }"
											target="_blank" style="font-size: 20px; color: #3F3F3F;">${suggest.name}</a></span><span
											style="margin-left: 20px; font-size: 15px; color: #999999;">
											<fmt:formatDate value="${suggest.time}" pattern="yyyy-MM-dd HH:mm"/>
											</span>
									</div>
									<div class="col-sm-3">
										<div align="right">
											<button type="button" class="btn btn-default btn-xs"
												title="点赞">
												<span class="glyphicon glyphicon-thumbs-up"></span>
												赞(${suggest.praise})
											</button>
										</div>
									</div>
								</div>

							</div>
							<br />
							<p>${suggest.review}</p>
							<br />
							<div class="row">
								<div class="col-md-12">
									<div align="right">
										<button type="button" class="btn btn-default btn-xs"
											title="回复" onclick='reply(${suggest.id });'>
											<span class="glyphicon glyphicon-comment"></span> 回复
										</button>
									</div>
								</div>
							</div>
						</div>


						<c:forEach var="reply" items="${map[suggest.id]}">
							<div class="well-sm" style="background-color: #F3F3F3;">
								<span class=""><a
									style="font-size: 15px; color: #3F3F3F;"
									href="${reply.website}">${reply.name }</a></span><span
									style="margin-left: 10px; font-size: 10px; color: #999999;">
									
									<fmt:formatDate value="${reply.time}" pattern="yyyy-MM-dd HH:mm"/>
									</span><br />
								<p style="font-size: 15px; color: #737373;">${reply.review}</p>
							</div>
						</c:forEach>
					</div>

				</div>
				<div class="col-md-3"></div>
			</div>
		</c:forEach>
	</div>

	<script type="text/javascript">
		function reply(id){
			$("#addform").attr("action","reply_suggest?replyId="+id);
			$("#review").attr("placeholder","回复 第"+id+"楼：");
			$("#show").show();
			mScroll("addform");
		}
		
		function cancelreply(e){
			$(e).hide();
			$("#addform").attr("action","add_suggest");
			$("#review").attr("placeholder","吐槽星人，有什么绝招使出来吧");
		}
		
		function mScroll(id){
            $("html,body").stop(true);
            $("html,body").animate({scrollTop: $("#"+id).offset().top}, 1000);
        }
		
		$(document).ready(function(){
			$("#addform").bootstrapValidator({
				live : "disabled",
				fields : {
					review : {
						validators : {
							notEmpty : {
								message : '评论不能为空'
							}
						}
					}
				}
			});
		});
	</script>
</body>

</html>